import React, { useRef, useEffect, useState } from 'react';
import { motion } from 'framer-motion';

const App = () => {
    const ref = useRef(null);
    const [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    setIsVisible(true);
                    observer.unobserve(entry.target);
                }
            });
        });

        if (ref.current) {
            observer.observe(ref.current);
        }

        return () => {
            if (ref.current) {
                observer.unobserve(ref.current);
            }
        };
    }, []);

    const animationVariants = {
        hidden: {
            opacity: 0,
            y: 50,
            scale: 0.9
        },
        visible: {
            opacity: 1,
            y: 0,
            scale: 1,
            transition: {
                duration: 0.8,
                ease: [0.6, -0.05, 0.01, 0.99]
            }
        }
    };

    return (
        <div style={{ height: '2000px' }}>
            <motion.div
                ref={ref}
                variants={animationVariants}
                initial="hidden"
                animate={isVisible? 'visible' : undefined}
            >
                <h1>滚动到这里才显示动画的元素</h1>
                <p>这是一个复杂动画的示例，当元素滚动到可见区域时会执行动画。</p>
            </motion.div>
        </div>
    );
};

export default App;    